All posts
Design 6 min read

Your default copy is the design

The words a section ships with are what every visitor sees until someone edits them. So we write them the way the product would, not the way a template would.

Elena Ruiz

Head of Design

Five sharpened wooden pencils lying side by side on a folded sheet of cream paper

When we review a new section, the first thing we read is not the markup. It is the default values in its YAML file. Those strings are what a team sees the moment they add the section to a page, and for a surprising number of sites, they are what goes live.

That makes defaults a design decision, not a placeholder to be filled in later. A section that ships with placeholder Latin or “Feature one” teaches nothing about how it should be used. A section that ships with a specific headline, a real-looking price and a testimonial with a full name shows exactly how much text each slot was drawn for.

Write for one invented product

Every section in the library is written for one product with a job. The pricing section sells a tool with three plans at $0, $29 and $79. The FAQ answers questions somebody would actually ask before paying. When the copy is about something, the layout is tested against real lengths: a plan description that wraps to two lines, a question that runs long, a name with a hyphen.

We keep a few rules on the wall:

  • Headlines under eight words, in sentence case, with no exclamation marks.
  • Numbers are specific. “11 days” and “4.9 from 312 reviews” read as true; “10x” and “thousands of happy customers” read as filler.
  • Buttons say what happens next: “Start free”, “See pricing”, “Book a demo”. Never “Submit” and never “Learn more”.
  • People get a full name, a role and a company. A quote without a name is just an opinion.

Length is part of the layout

A three-column feature grid is drawn for three short titles and three single sentences. If one description runs to four lines, the row stops lining up and the section looks broken, even though nothing is wrong with the code. So when we write defaults, we write them to the length the layout was designed for, and the field’s help text says so.

We check this at three widths before a section ships: a phone at 390 pixels, a tablet at 768 and a laptop at 1280. A headline that sits on two lines at 1280 and breaks into five at 390 usually means the default is too long, not that the type is too big. Shortening the copy fixes it everywhere; shrinking the type only moves the problem.

The same goes for images. Each image field names the aspect it was drawn for. A 21:9 slot that receives a square photo will crop it, and the crop will be wherever the browser decides. Saying “a wide 21:9 crop works best” in the field description saves a round of confused messages to support.

Defaults travel

Because a section’s defaults live in its own files, they travel with it. When you add a testimonial wall to a new page, it arrives complete, with six quotes of different lengths, so you can see how the masonry behaves before you write your own. Bind it to your testimonials collection and the rows switch over; unbind it and the defaults come back.

The test we apply before a section ships is simple. If a visitor landed on a page made only of default values, would it read like a real company’s site? If the answer is no, the section is not finished, however good the markup is.

One email a month

What shipped, what changed, and one marketing page worth stealing from another team. That is all.

No spam. Unsubscribe any time.